<template>
  <div class="ma-content-block">
    <a-space class="flex">
      <a-input-tag v-model.trim="userList" :style="{ minWidth: '240px' }" placeholder="请选择指定用户" readonly />
      <a-button type="primary" @click="visible = true"> 选择 </a-button>
    </a-space>
    <a-modal v-model:visible="visible" :on-before-ok="close" draggable width="1000px" @open="handleOpen">
      <template #title>{{ props.text }}</template>
      <ma-crud
        ref="crudRef"
        v-model:selected-keys="selecteds"
        :columns="columns"
        :options="crud"
        @selection-change="selectHandler"
      />
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { Message } from "@arco-design/web-vue";
import { isArray, isEmpty } from "lodash";
import { getUserInfoByIds, listUser } from "@/api/system/user";

const props = defineProps({
  modelValue: { type: Array },
  isEcho: { type: Boolean, default: true },
  multiple: { type: Boolean, default: true },
  onlyId: { type: Boolean, default: true },
  text: { type: String, default: "选择用户" },
  echoValue: { type: Array, default: [] }
});

const emit = defineEmits(["update:modelValue", "success"]);

const crudRef = ref();
const visible = ref<boolean>(false);
const selecteds = ref<any>([]);
const userList = ref<any>([]);
onMounted(async () => {
  if (props.isEcho && props.onlyId) {
    selecteds.value = props.modelValue;
    userList.value = props.echoValue;
  }
});

watch(
  () => props.modelValue,
  val => {
    if (props.isEcho && props.onlyId) {
      selecteds.value = val;
    }
  }
);

const selectHandler = (rows: any) => {
  selecteds.value = rows;
};

const handleOpen = () => {
  crudRef.value.setSelecteds(selecteds.value);
};

const close = async (done: any) => {
  if (isArray(selecteds.value) && selecteds.value.length > 0) {
    const response = await getUserInfoByIds(selecteds.value);
    if (!isEmpty(response) && isArray(response.data)) {
      userList.value = response.data.map((item: any) => {
        return `${item.userName}`;
      });
      if (props.onlyId) {
        emit("update:modelValue", selecteds.value);
      } else {
        emit("update:modelValue", response.data);
      }
      emit("success", true);
      Message.success("选择成功");
    }
  } else {
    emit("update:modelValue", []);
    userList.value = [];
  }
  done(true);
};

const crud = ref({
  pk: "userId",
  showIndex: false,
  api: listUser,
  rowSelection: props.multiple ? { type: "checkbox", showCheckedAll: true } : { type: "radio" }
});

const columns = ref([
  { title: "账户", dataIndex: "userName", search: true, mWidth: 170 },
  { title: "昵称", dataIndex: "nickName" },
  { title: "手机", dataIndex: "phoneNumber", search: true, mWidth: 170 },
  { title: "邮箱", dataIndex: "email" },
  {
    title: "部门",
    dataIndex: "deptId",
    search: true,
    formType: "tree-select",
    mWidth: 170,
    hide: true,
    dict: {
      url: "/system/user/deptTree",
      props: {
        key: "id",
        title: "label"
      }
    }
  }
]);
</script>

<style scoped>
:deep(.arco-tabs-nav-type-capsule .arco-tabs-nav-tab) {
  justify-content: flex-start;
}
</style>
